<template>
  <div class="invoice-detail">
    <ul class="incoice-list">
      <li class="van-hairline--bottom">
        <span class="desc">公司名称</span>
        <span class="val">{{ invoiceData.company }}</span>
      </li>
      <li class="van-hairline--bottom">
        <span class="desc">纳税人识别号</span>
        <span class="val">{{ invoiceData.taxpayerIdNum }}</span>
      </li>
      <li class="van-hairline--bottom">
        <span class="desc">公司地址</span>
        <span class="val">{{ invoiceData.companyAddress }}</span>
      </li>
      <li class="van-hairline--bottom">
        <span class="desc">开户银行</span>
        <span class="val">{{ invoiceData.bankName }}</span>
      </li>
      <li class="van-hairline--bottom">
        <span class="desc">银行账号</span>
        <span class="val">{{ invoiceData.bankAccount }}</span>
      </li>
      <li class="van-hairline--bottom">
        <span class="desc">联系手机</span>
        <span class="val">{{ invoiceData.phone }}</span>
      </li>
      <li v-show="invoiceData.licensePicture">
        <span class="desc">营业执照</span>
        <img class="val license-img" :src="invoiceData.licensePicture" alt="" />
      </li>
    </ul>
    <van-button color="#FE9100" block @click="routerTo(`/invoiceManage?id=${id}`)">编辑</van-button>
    <van-button color="#292F3D" block plain @click="handleDelete">删除</van-button>
  </div>
</template>

<script>
import { invoiceTitle_getInvoiceTitleDetail, invoiceTitle_delInvoiceTitle } from '@api/user';
import { Button, Dialog } from 'vant';
export default {
  components: {
    [Button.name]: Button,
    [Dialog.Component.name]: Dialog.Component
  },
  data() {
    return {
      id: this.$route.query.id,
      invoiceData: {}
    };
  },
  mounted() {
    this.getInvoiceDetail();
  },
  methods: {
    async getInvoiceDetail() {
      let res = await invoiceTitle_getInvoiceTitleDetail({ invoiceId: this.id });
      if (res.code === 200) {
        this.invoiceData = res.data;
      } else {
        Toast(res.msg);
      }
    },
    handleDelete() {
      Dialog.confirm({
        title: '确定删除吗？',
        confirmButtonColor: '#f09637'
      })
        .then(() => {
          invoiceTitle_delInvoiceTitle({ invoiceId: this.id }).then(res => {
            if (res.code === 200) {
              this.$router.go(-1);
            } else {
              Toast(res.msg);
            }
          });
        })
        .catch(() => {
          // on cancel
        });
    }
  }
};
</script>

<style lang="scss" scoped>
.incoice-list {
  background: #fff;
  padding: 0 32px;
  margin-bottom: 65px;
  li {
    min-height: 112px;
    padding: 15px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 28px;
    box-sizing: border-box;
    .desc {
      color: #292f3d;
      flex: 0 0 300px;
    }
    .val {
      flex: 1;
      color: #7a8593;
      text-align: right;
      word-break: break-all;
      line-height: 36px;
      &.license-img {
        width: 250px;
        flex: 0 0 250px;
      }
    }
  }
}
.van-button {
  width: calc(100% - 64px);
  margin: 20px auto;
  font-size: 30px;
  border-radius: 6px;
  font-weight: bold;
}
</style>
